<!DOCTYPE html>
<html>
<head>
</head>
<body style="font:14px Consolas; margin:0;">
<div>border-collapse:separate;</div>
<div id="table1" style="display:table; width:200px; border-spacing:10px; background:bisque; border-collapse:separate; border-left:5px solid black; border-right:5px solid black;">
	<div style="display:table-row;">
		<div style="display:table-cell; padding:10px; border:10px solid gray; width:50px;">
			<div style="background:maroon; color:white;">A</div>
		</div>
		<div style="display:table-cell; padding:10px; border:10px solid gray;">
			<div style="background:maroon; color:white;">B</div>
		</div>
	</div>
</div>
<br />
<div>border-collapse:collapse;</div>
<div id="table2" style="display:table; width:200px; background:bisque; border-collapse:collapse; border-right:5px solid black;">
	<div style="display:table-row;">
		<div style="display:table-cell; padding:10px; border:10px solid gray; width:50px;">
			<div style="background:maroon; color:white;">A</div>
		</div>
		<div style="display:table-cell; padding:10px; border:10px solid gray; border-right:20px solid black;">
			<div style="background:maroon; color:white;">B</div>
		</div>
	</div>
	<div style="display:table-row;">
		<div style="display:table-cell; padding:10px; border:10px solid gray; width:50px;">
			<div style="background:maroon; color:white;">A</div>
		</div>
		<div style="display:table-cell; padding:10px; border:10px solid gray; border-right:50px solid black;">
			<div style="background:maroon; color:white;">B</div>
		</div>
	</div>
</div>
</body>
</html>